<template>
  <div class="page" v-show="show">
    <div class="pagelist">
      <span class="jump" :class="{disabled:pstart}" @click="turnPage(--currentPage)">上一页</span>
      <span v-show="currentPage>5" class="jump" @click="jumpPage(1)">1</span>
      <span class="ellipsis" v-show="efont">...</span>
      <span
        class="jump"
        v-for="num in indexs"
        :key="num"
        :class="{bgprimary:currentPage==num}"
        @click="jumpPage(num)"
      >{{num}}</span>
      <span class="ellipsis" v-show="ebehind">...</span>
      <span :class="{disabled:pend}" class="jump" @click="turnPage(++currentPage)">下一页</span>
      <span v-show="currentPage<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
      <span class="jumppoint">跳到：</span>
      <span class="jumpinp">
        <input id="goPage" type="text">
      </span>
      <span class="jump gobtn" @click="jumpPage()">GO</span>
    </div>
  </div>
</template>

<script>
// 巴士：用于兄弟组件间传值
import bus from "../../../../static/base/eventBus.js";
// 记录总页数
var totalPage = 0;

export default {
  name: "myCare",
  data() {
    return {
      currentPage: 1, //当前页
      pages: 0, //总页数
      changePage: "", //跳转页
      nowIndex: 0
    };
  },
  computed: {
    show: function() {
      return this.pages;
      // && this.pages != 1; 只有一页不显示分页。
    },
    pstart: function() {
      return this.currentPage == 1;
    },
    pend: function() {
      return this.currentPage == this.pages;
    },
    efont: function() {
      if (this.pages <= 7) return false;
      return this.currentPage > 5;
    },
    ebehind: function() {
      if (this.pages <= 7) return false;
      var nowAy = this.indexs;
      return nowAy[nowAy.length - 1] != this.pages;
    },
    indexs: function() {
      var left = 1,
        right = this.pages,
        ar = [];
      if (this.pages >= 7) {
        if (this.currentPage > 5 && this.currentPage < this.pages - 4) {
          left = Number(this.currentPage) - 3;
          right = Number(this.currentPage) + 3;
        } else {
          if (this.currentPage <= 5) {
            left = 1;
            right = 7;
          } else {
            right = this.pages;

            left = this.pages - 6;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    }
  },
  methods: {
    turnPage: function(currentPage) {
      // 当前页数
      bus.$emit("currentPage", currentPage);
      // 重新加载页面：查询按钮再查询。
      var refresh = 1;
      bus.$emit("refresh", refresh);
    },
    jumpPage: function(toPage) {

      if (null == toPage) {
        var toPage = $("#goPage").val();
      }

      $("#goPage").val("");
      
      if (!/(^[1-9]\d*$)/.test(toPage)) {
        return alert("请输入正整数!");
      }

      if (toPage > this.pages) {
        return alert("跳转页不能大于总页数!");
      }
      this.currentPage = toPage;
      this.turnPage(toPage);
    }
  },
  created() {
    // 监听表单初始化、刷新  得总页数
    bus.$on("totalPage", totalPage => {
      this.pages = totalPage;
      if (1 == totalPage) {
        this.currentPage = 1;
      }
    });
  }
};

function changePage(currentPage) {
  // 当前页数
  bus.$emit("currentPage", currentPage);
  // 重新加载页面：查询按钮再查询。
  var refresh = 1;
  bus.$emit("refresh", refresh);
}
</script>

<style scoped>
.page {
  font-weight: 900;
  height: 50px;
  text-align: center;
  /* 字体色 */
  /* color: rgb(10, 10, 10); */
  color: #fff;
  margin: -20px auto 0;
  background: rgba(233, 163, 223, 0.1);
}

.pagelist {
  font-size: 0;
  background: rgba(233, 163, 223, 0.1);
  height: 50px;
  line-height: 50px;
}

.pagelist span {
  font-size: 18px;
}

.pagelist .jump {
  border: 1px solid #ccc;
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
}

.pagelist .bgprimary {
  cursor: default;
  color: #fff;
  background: #b0d0ec;
  border-color: #b0d0ec;
}

/* 跳到框和数字 */
.jumpinp input {
  width: 55px;
  height: 26px;
  font-size: 15px;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.ellipsis {
  padding: 0px 8px;
}

.jumppoint {
  margin-left: 30px;
}

/* go 框 */
.pagelist .gobtn {
  color: #fff;
  font-size: 16px;
}

.bgprimary {
  cursor: default;
  color: #fff;
  background: #b0d0ec;
  border-color: #b0d0ec;
}
/* 上一页 */
.pagelist .jump.disabled {
  pointer-events: none;
  background: rgb(119, 115, 115);
}
</style>
